<template>
  <div class="dialogTable">
    <div class="inpVue">
      <span style="color: #333; padding-right: 30px">内容标题</span>
      <el-input placeholder="请输入" style="width: 50%" v-model="form.title"></el-input>
    </div>

    <div class="inpVue" style="margin-top: 20px">
      <span style="color: #333; padding-right: 30px">发布账号</span>
      <el-select v-model="form.uid" placeholder="请选择" style="width: 50%">
        <el-option v-for="item in users" :key="item.phone" :label="item.phone" :value="item.id"></el-option>
      </el-select>
    </div>

    <!-- <div class="inpVue" style="margin-top: 20px">
      <span style="color: #333; padding-right: 30px">社区分类</span>
      <el-select v-model="form.categoryId" placeholder="请选择" style="width: 50%">
        <el-option v-for="item in commList" :key="item.name" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </div> -->

    <div class="inpVue" style="margin-top: 20px">
      <span style="color: #333; padding-right: 30px">内容封面</span>
      <div class="uploader" @click="modalPicClick(false)">
        <!-- <input
          ref="clearRef1"
          class="fileBtn"
          type="file"
          id="fileupload1"
          accept="image/*"
          @change="fileChange($event, 0, null)"
        /> -->
        <img v-if="form.cover" :src="form.cover" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </div>
    </div>

    <div class="box" style="margin-top: 30px">
    <span style="color: #333; padding-right: 30px">搭配组合</span>
      <div class="item" v-for="(item, index) in form.extraGroups" :key="index">
        
        <div class="itemTop">
          <span style="color: #222; font-size: 14px">搭配图片</span>
          <div class="imgVue">
            <div class="uploader" v-if="item.images.length < 9" @click="modalPicTap(true, index)">
              <!-- <input
                ref="clearRef"
                class="fileBtn"
                type="file"
                id="fileupload"
                accept="image/*"
                @change="fileChange($event, 1, index)"
              /> -->
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
            <div class="img" v-for="(o, i) in item.images" :key="i">
              <img :src="o" style="width: 100%; height: 100%" />
              <div class="inner">
                <span class="el-icon-delete" @click="imgDelete(index, o)"></span>
              </div>
            </div>
          </div>
          <div style="height: 20px"></div>
          <span style="color: #999; font-size: 14px">允许选择多张图片文件上传，最多只能上传 9 张图片，支持jpg/png</span>
        </div>
        <div class="itemBot">
          <span style="color: #222; font-size: 14px">搭配商品</span>
          <div class="imgVue">
            <div class="uploader" @click="chooseProduct(index)" style="cursor: pointer">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
            <div class="prodcut" v-for="(o, i) in item.products" :key="i">
              <img :src="o.image" style="width: 100px; height: 100px; border-radius: 4px" />
              <div class="rRight">
                <div class="name">{{ o.name }}</div>
                <div class="price">{{ o.price }}</div>
              </div>
              <div class="inner">
                <span class="el-icon-delete" @click="productDelete(index, o)"></span>
              </div>
            </div>
          </div>
          <div style="height: 20px"></div>
          <div style="display: flex; justify-content: space-between; align-items: center;">
          <span style="color: #999; font-size: 14px">允许选择多件商品，最多只能选择20件商品</span>

            <div class="delete" @click="deleteFun(index)">删除搭配</div>
          </div>
        </div>
      </div>
      <div class="btnVue">
        <div class="btn btn1" @click="add">添加搭配</div>
        <!-- <span class="el-icon-plus" style="font-size: 26px; color: #0256ff; cursor: pointer" ></span> -->
        <div style="display: flex; align-items: center;">
            <div class="btn" @click="beforeClose">取消</div>
            <div class="btn btn1" @click="publish(2)">草稿</div>
            <div class="btn btn1" @click="publish(1)">确定</div>
        </div>
      </div>
    </div>

    <el-drawer title="内容详情" :visible.sync="drawer" direction="rtl">
      <div style="width: 100%; height: 40px; display: flex; justify-content: space-between; padding: 0 20px">
        <input
          type="text"
          placeholder="搜索商品"
          v-model="keywords"
          style="
            flex: 1;
            height: 40px;
            border-radius: 5px;
            border: 1px solid #dcdfe6;
            padding-left: 10px;
            font-size: 14px;
          "
        />
        <div
          style="
            width: 70px;
            height: 40px;
            border-radius: 5px;
            background: #2561ef;
            margin-left: 15px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
          "
          @click="searchFun()"
        >
          搜索
        </div>
      </div>
      <div class="product1" v-for="(item, index) in list" :key="index">
        <img :src="item.image" style="width: 60px; height: 60px; margin-right: 20px" />
        <div class="right">
          <div class="flex-between">
            <div class="name">{{ item.name }}</div>
          </div>
          <div class="flex-between">
            <div style="color: #4d4d4d; font-size: 14px">¥{{ item.price }}</div>
            <img
              src="../../../assets/radio_1.png"
              style="width: 28px; height: 28px; cursor: pointer"
              v-if="JSON.stringify(selected).includes(JSON.stringify(item))"
              @click="select(item, 1)"
            />
            <img
              v-else
              src="../../../assets/radio.png"
              style="width: 28px; height: 28px; cursor: pointer"
              @click="select(item, 0)"
            />
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>


<script>
import { officialUserList } from '@/api/creation';
import { publishApi } from '@/api/creation';
import { fileImageApi } from '@/api/systemSetting';
import { getToken } from '@/utils/auth';
import { communityCategoryListApi } from '@/api/community';
import { productLstApi } from '@/api/product';
export default {
  data() {
    return {
      form: {
        uid: '',
        content: '',
        cover: '',
        categoryId: '',
        extraGroups: [
          {
            images: [],
            products: [],
            productIds: [],
          },
        ],
        title: '',
        auditStatus: 1,
      },
      drawer: false,
      pIndex: 0,
      keywords: '',
      users: [],
      commList: [],
      myHeaders: { 'X-Token': getToken() },
      list: [],
      page: 1,
      limit: 30,
      totalPage: 0,
      selected: []
    };
  },
  created() {
    this.getUsers();
    // this.getCommit();
  },
  methods: {
    beforeClose() {
      this.$emit('close');
    },
    add() {
      this.form.extraGroups.push({
        images: [],
        products: [],
        productIds: [],
      })
    },
    deleteFun(index){
        this.form.extraGroups.splice(index, 1)
    },

    modalPicTap(multiple, index) {
      let _this = this
      this.$modalUpload(
        function (img) {
          if (!img) return;
          img.forEach(o=>{
            if(_this.form.extraGroups[index].images.length===9)
            _this.form.extraGroups[index].images.push(o.sattDir);
          })
        },
        multiple,
        'store',
      );
    },
    
    modalPicClick(multiple){
      let _this = this
      this.$modalUpload(
        function (img) {
          if (!img) return;
          _this.form.cover = img[0].sattDir;
        },
        multiple,
        'store',
      );
    },

    select(item, index){
      console.log(this.form.extraGroups[this.pIndex].productIds.length)
      if(index==0) {
        if(this.form.extraGroups[this.pIndex].productIds.length==20) return this.$message.info('最多只能选择20件商品');
        this.selected.push(item)
        this.form.extraGroups[this.pIndex].productIds.push(item.id)
        this.form.extraGroups[this.pIndex].products.push(item)
      }else{
        this.selected = this.selected.filter(o=>{
          return item.id!=o.id
        })
        this.form.extraGroups[this.pIndex].productIds = this.form.extraGroups[this.pIndex].productIds.filter(o=>{
          return item.id!=o
        })
        this.form.extraGroups[this.pIndex].products = this.form.extraGroups[this.pIndex].products.filter(o=>{
          return item.id!=o.id
        })
      }
    },

    imgDelete(index, o){
      console.log(index, o)
      this.form.extraGroups[index].images = this.form.extraGroups[index].images.filter(ver=>{
        console.log(ver, o)
        return ver!=o
      })
    },

    productDelete(index, o){
      console.log(this.form.extraGroups[index].productIds.length)
      this.selected = this.selected.filter(ver=>{
          return ver.id!=o.id
        })
      this.form.extraGroups[index].productIds = this.form.extraGroups[index].productIds.filter(ver=>{
        return ver!=o
      })
      this.form.extraGroups[index].products = this.form.extraGroups[index].products.filter(ver=>{
        return ver.id!=o.id
      })
    },


    chooseProduct(index) {
      this.drawer = true;
      this.pIndex = index;
      this.getList()
    },
    getList() {
      const param = {
        page: this.page,
        limit: this.limit,
        type: '1',
        keywords: this.keywords,
        auditStatus: 1
      };
      productLstApi(param)
        .then((res) => {
          this.list = this.list.concat(res.list);
          this.totalPage = res.totalPage;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getUsers() {
      officialUserList().then((res) => {
        console.log('123456', res);
        this.users = res;
      });
    },
    getCommit() {
      communityCategoryListApi().then((res) => {
        console.log(',,', res);
        this.commList = res.list;
      });
    },

    publish(auditStatus) {
      this.form.auditStatus = auditStatus
      console.log(this.form.auditStatus)
      publishApi(this.form).then((res) => {
        console.log(res);
        this.$message.success('发布成功');
        this.form = {
          uid: '',
          content: '',
          cover: '',
          categoryId: '',
          extraGroups: [
            {
              images: [],
              products: [],
              productIds: [],
            },
          ],
          title: '',
          auditStatus: 1
        };
      });
      setTimeout(() => {
        this.$router.push({ name: "communityOfficial" })
      }, 1500);
      
    },
    // 选择文件
    fileChange(event, type, index) {
      console.log(index, 'kkk');
      let file = event.target.files[0];
      let formData = new FormData();
      formData.append('multipart', file);
      const data = {
        model: 'product',
        pid: 0,
      };
      this.uploadPic(formData, data, type, index);
    },
    // 上传
    handleUploadForm(param) {
      const formData = new FormData();
      const data = {
        model: 'product',
        pid: 0,
      };
      formData.append('multipart', param.file);
      this.uploadPic(formData, data, '', 0);
    },

    uploadPic(formData, data, type, index) {
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });

      fileImageApi(formData, data)
        .then((res) => {
          loading.close();
          this.$message.success('上传成功');
          if (type == 1) {
            this.form.extraGroups[index].images.push(res.url);
            console.log(this.form.extraGroups);
            console.log('nnnn');
          } else {
            console.log('mmmm');
            this.form.cover = res.url;
          }
        })
        .catch((res) => {
          loading.close();
        });
    },
  },
};
</script>

<style lang="scss">
.el-dialog__body {
  padding: 0;
  height: 80vh !important;
  max-height: 80vh !important;
}
.el-input__inner {
  height: 40px !important;
}
.dialogTable {
  padding: 20px;
  background: #fff;
  .inpVue {
    width: 100%;
    display: flex;
    align-items: center;
    .uploader {
      width: 120px;
      height: 120px;
      border: 1px dashed rgb(192, 204, 218);
      margin-right: 20px;
      margin-top: 20px;
      position: relative;
      .fileBtn {
        width: 118px;
        height: 118px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 98;
        border: none;
        outline: none;
      }
    }
  }
  .item {
    width: 100%;
    // min-height: 440px;
    background: #f5f5f5;
    margin-top: 20px;
   
    .delete {
        width: 66px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      margin-left: 15px;
      cursor: pointer;
      width: 90px;
        background: #0256ff;
        border-radius: 4px;
        color: #fff !important;
    }
    .itemTop,
    .itemBot {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      padding: 20px;
      .imgVue {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .uploader {
          width: 120px;
          height: 120px;
          border: 1px dashed rgb(192, 204, 218);
          margin-right: 20px;
          margin-top: 20px;
          position: relative;
          .fileBtn {
            width: 118px;
            height: 118px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 98;
            border: none;
            outline: none;
          }
        }
        .img {
          width: 120px;
          height: 120px;
          margin-right: 20px;
          margin-top: 20px;
          position: relative;
          .inner {
            width: 100%;
            height: 100%;
            position: absolute;
            background: rgba(0,0,0,0.6);
            opacity: 0;
            left: 0;
            top: 0;
            span {
              color: #d81e06;
              font-size: 24px;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              cursor: pointer;
            }
          }
        }
        .img:hover {
          .inner {
            opacity: 1;
          }
        }
        .prodcut {
          width: 300px;
          height: 120px;
          background: #fff;
          margin-right: 20px;
          margin-top: 20px;
          display: flex;
          align-items: center;
          padding: 10px;
          position: relative;
          .inner {
            width: 100%;
            height: 100%;
            position: absolute;
            background: rgba(0,0,0,0.6);
            opacity: 0;
            left: 0;
            top: 0;
            span {
              color: #d81e06;
              font-size: 24px;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              cursor: pointer;
            }
          }
          .rRight {
            flex: 1;
            height: 80px;
            padding-left: 15px;

            .name {
              color: #333;
              font-weight: 600;
            }
            .price {
              color: #d81e06;
              padding-top: 20px;
            }
          }
        }
        .prodcut:hover {
          .inner {
            opacity: 1;
          }
        }
      }
    }
  }
  .btnVue {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 30px;
    .btn {
      width: 66px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      margin-left: 15px;
      cursor: pointer;
    }

    .btn:nth-child(1) {
      color: #333;
      border: 1px solid #f5f5f5;
      border-radius: 4px;
    }
    .btn:nth-child(2) {
      color: #fff;
      background: #0256ff;
      border-radius: 4px;
    }
    .btn1 {
        width: 90px;
        background: #0256ff;
        border-radius: 4px;
        color: #fff !important;
    }
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader {
  position: relative;
  .fileBtn {
    width: 118px;
    height: 118px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 98;
    border: none;
    outline: none;
  }
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 118px;
  height: 118px;
  line-height: 118px;
  text-align: center;
}
.avatar {
  width: 118px;
  height: 118px;
  display: block;
}
.product1 {
    width: 100%;
    display: flex;
    padding-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
    margin-top: 15px;
    padding: 0 20px 20px 20px;
    .right {
      flex: 1;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .flex-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name {
          color: #4d4d4d;
        }
        .btn {
          width: 60px;
          height: 30px;
          background: #2561ef;
          border-radius: 5px;
          line-height: 30px;
          text-align: center;
          color: #fff;
          cursor: pointer;
        }
        .opraVue {
          margin-top: 15px;
          display: flex;
          justify-content: flex-end;
          span {
            color: #2561ef;
            font-size: 15px;
            cursor: pointer;
          }
          .line {
            width: 1px;
            height: 16px;
            background: #2561ef;
            margin: 0 15px;
          }
          span:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }
</style>